<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: #ffe7f7;
				background-image: url(img/xiaoxin.png);
				background-size: 30% 30%;
				background-repeat: no-repeat;
				/* 背景定位 */
				background-position: 20% 0%;
				background-position: center center;
			}
			body{
				/* 水印：1.加高度【滚动条】 */
				/* 3.启动背景图模式：等比例缩放模式 */
				background-size: cover;
				height: 1000000px;
				/* 2.背景图 */
				background-image: url(img/xiaoxin.png);
				/* 4.设置滚动模式 */
				background-attachment: fixed;
			}
		</style>
	</head>
	<body>
		<!-- 背景属性：页面上可以任意调整位置或者改变图片的效果 
		     ①backgroung-color背景颜色【子属性可以省略】
			 ②background-image【指定背景图】url()|url("")|url('')
			 ③background-size背景尺寸  属性值 两种 ①px 绝对  %范围值
			                                     ②函数模式  1.contain 等比例缩放图片
												                  保证图片完全显示页面中
												           2.cover   等比例放大图片
														         覆盖整个容器
			 ④【前提：背景图小于空间】background-repeat背景重复
			 ⑤【前提：背景图小于空间】background-position背景属性：给背景图定位
			                                           属性值：x%      y%
													          数值px  数值px
															  英文
			 ⑥背景固定属性；background-attachment [用法：搭配background-size函数]
			  做背景图水印效果，步骤1：高度滚动条
			                      2.背景图存入body中
								  3.背景图前启动模式  contain模式
								  4.启动北京固定属性  fixed
		-->
		<div></div>
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab hic aspernatur fugit explicabo dignissimos velit ipsam quisquam, deserunt vero facilis magni vitae accusantium esse a molestias quasi voluptatibus id! Nulla. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab, accusantium? Porro, corporis fuga impedit omnis minima reiciendis aut rerum quos ullam doloribus amet. Recusandae dolores adipisci omnis nisi, quaerat obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque nulla cum voluptas adipisci beatae, ea quia dignissimos iste obcaecati voluptates! Veniam atque deserunt labore quisquam? Consequatur sequi reiciendis delectus quo. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis qui voluptates officia sit nulla vero deserunt accusamus ipsa, aliquid atque dolores, dignissimos laudantium harum consectetur quidem consequatur expedita maiores fugit!
	</body>
</html>